uni

2023-07-17 11:43| 来源: 网络整理| 查看: 265

描述：

从后端调用接口获取所有热的姓名，将这些名字的首字母排序，然后放到对应字母下面，最终效果图如下：在这里插入图片描述

实现过程

**总体实现的思路是：**首先调用接口，获取所有员工的姓名以及其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“张三” 转为“ZS”）这里只需要名字的第一个字的首字母，使用js的截取功能就能实现，中文转拼音这里我使用的是js-pinyin，将转换好的内容渲染到页面上。 1、下载js-pinyin包 npm install js-pinyin 2、在main.js中引入js-pinyin import pinyin from 'js-pinyin' 3、在methdos函数中调用接口获取名字的数据，这里的res就是获取回来的员工信息。获取回来的数据结构如下图

在这里插入图片描述 4、实现中文转换为拼音的功能（1）、当在组件中使用时，要先在export default前引用node_modules/js-pinyin中的index.js文件： import pinyin from '…/…/…/node_modules/js-pinyin/index 注意node_modules/js-pinyin的文件路径

(2)、一个是引入js-pinyin，一个是配置js-pinyin。

let pinyin = require('js-pinyin') pinyin.setOptions({checkPolyphone: false, charCase: 0})

（3）、在data中定义变量

data(){ return{ firstPin :["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"], namejson:{},//转换为拼音后的数据 } }

（4）、获取姓名，将其转为拼音

//循环数组，拿到所有的姓名 for(var i = 0 ; i < res.data.content.length ; i ++){ // 取所有姓名的首字母 let peopleName = res.data.content[i].name // 取所有姓名的首字母 let firstname = pinyin.getCamelChars(peopleName).substring(0, 1) //给原json添加首字母键值对 res.data.content[i].first = firstname //放入新数组 nameArr.push(res.data.content[i]) // that.result.push(res.data.content[i].id) }

（5）、整理完后的数据格式如下图：在这里插入图片描述

转换为拼音的所有代码如下：

getData(){ let nameArr = []; var that = this uni.request({ url: '获取员工信息的接口', data: { id:that.id, repairType:that.repairType }, method:'POST', header: { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': 'JSESSIONID=' + uni.getStorageSync('token') }, dataType:'json', success: (res) => { console.log("选择员工的数据") console.log(res) let dataArr = res.data.content let pinyin = require('js-pinyin') pinyin.setOptions({checkPolyphone: false, charCase: 0}) //循环数组，拿到所有的姓名 for(var i = 0 ; i < res.data.content.length ; i ++){ // 取所有姓名的首字母 let peopleName = res.data.content[i].name // 取所有姓名的首字母 let firstname = pinyin.getCamelChars(peopleName).substring(0, 1) //给原json添加首字母键值对 res.data.content[i].first = firstname //放入新数组 nameArr.push(res.data.content[i]) // that.result.push(res.data.content[i].id) } console.log(that.result) let namejson = {}; //根据首字母键值对给原数据按首字母分类 for (let i = 0; i < that.firstPin.length; i++) { //这里的FirstPin是一个写入了所有字母的数组,见data中 namejson[that.firstPin[i]] = nameArr.filter(function (value) { return value.first === that.firstPin[i] }) } that.namejson = namejson console.log(that.namejson) console.log(that.namejson.Z ) } }) }, 前端页面渲染

1、前端布局这里的布局使用的是van -weapp组件库的van-index-bar、van-index-ancho组件。

//如果item为空，则不显示index-anchor //再次循环某个字母下面的数据v-for="(ite,i) in item" {{ite.name}} {{ite.phone}} {{ite.hrmDepName}} 已接单：{{ite.unDeposeOrderCount}}

在这里插入图片描述参考文章： https://www.cnblogs.com/lzb1234/p/11353152.html

【本文地址】

公司简介

联系我们